<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-if指令</title>
  </head>
  <body>
    <!-- 条件渲染
            1.v-if
              写法：
                1)v-if='表达式'
                2)v-else-if='表达式'
                3)v-else='表达式'
              适用于切换频率低的场景
              特点：不展示的DOM元素直接移除
              注：v-if可以和v-else-if、v-else一起使用，但要求结构不能被其他DOM元素中断
            2.v-show
              写法：v-show='表达式'
              适用于切换频率高的场景
              特点：不展示的DOM元素不被移除，仅仅是使用样式进行了隐藏
            3.注：使用v-if时，元素可能无法获取到，使用v-show一定可以获取到 -->
    <div id="root">
      <button @click="toggleIsShow">切换显示</button>
      <p v-if="isShow">不知道的人</p>

      <p v-if="1===1">1等于1</p>

      <h2 v-if="age>=35">差不多要被辞职了</h2>
      <h2 v-else-if="age>=20">已经{{age}}岁了</h2>
      <h2 v-else>还年轻的很</h2>

      <!-- v-if与template搭配使用
            优点：template实现多个v-if判断时不会影响结构 -->
      <template v-if="1===1">
        <h2>1</h2>
        <h2>2</h2>
        <h2>3</h2>
      </template>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      var vm = new Vue({
        el: "#root",
        data: {
          isShow: false,
          age: 0,
        },
        methods: {
          toggleIsShow: function () {
            this.isShow = !this.isShow;
          },
          countAge: function () {
            let nowdate = new Date();
            let year = nowdate.getFullYear() - 2000;
            let month = nowdate.getMonth() + 1;
            let day = nowdate.getDate();

            if (month > 5) {
              this.age = year;
            } else if (month < 5) {
              this.age = year - 1;
            } else {
              if (day >= 2) {
                this.age = year;
              } else {
                this.age = year - 1;
              }
            }
            console.log(this.age);
          },
        },
      });
      vm.countAge();
    </script>
  </body>
</html>
